<template>
    <div class="footer">
        <div class="w">
            <div v-if="currentSongInfo != null" class="pic">
                <img :src="currentSongInfo.al.picUrl">
            </div>
            <div class="song-info" v-if="currentSongInfo != null">
                <span>{{currentSongInfo.name}}</span>
                <span class="author">{{currentSongInfo.ar[0].name}}</span>
            </div>
            <div class="options">
                <i class="iconfont">&#xe76e;</i>
                <i @click="playStopSong" class="iconfont play">{{isFooterPlay == true ? '&#xe668;': '&#xe682;'}}</i>
                <i class="iconfont">&#xe76d;</i>
            </div>
            <div class="tools">
                <i @click="setMute" class="iconfont">{{isMute ? '&#xe60b;' : '&#xe692;'}}</i>
                <el-slider 
                @input="handleInput"
                v-model="volume"></el-slider>
            </div>
        </div>
        
        <audio controls ref="audioRef" :src="$store.state.currentSongUrl == '' ? currentSongUrl : $store.state.currentSongUrl" class="audioDOM">
            <source :src="$store.state.currentSongUrl == '' ? currentSongUrl : $store.state.currentSongUrl">
            您的浏览器不支持 audio 标签。
        </audio> 
    </div>
</template>

<script>
export default {
    props: {
        // 歌曲url
        currentSongUrl: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            // 音量
            volume: this.$store.state.currentVolume,
            tempVolume: 0,
            // 控制是否静音
            isMute: true,
            // 当前播放的音量
            currentMute: 0,
            // 当前是播放还是暂停
            isFooterPlay: this.$store.state.isFooterPlay,
            // 当前播放的索引值
            currentIndex: 99999999,
            // 当前播放歌曲的信息
            currentSongInfo: this.$store.state.currentSongInfo == '' ? null : this.$store.state.currentSongInfo
        }
    },
    mounted() {
        // 初始化音量
        this.$refs.audioRef.volume = this.volume / 100;
        // 跳转页面自动播放
        if (this.currentSongInfo != null) {
            if (this.isFooterPlay == true) {
                this.$refs.audioRef.play();
                this.audioAfterprint();
            }
            this.$refs.audioRef.currentTime = this.$store.state.currentTimer;
        };
        // 页面卸载
        this.windowBeforeunload();
    },
    beforeDestroy() {
        // 获取当前播放时长
        this.$store.commit('setCurrentTimer',this.$refs.audioRef.currentTime);
    },
    methods: {
        // 播放歌曲
        playSong(index, item) {
            if (this.currentSongInfo == null && item == undefined) {
                this.$message.error('当前播放队列暂无歌曲');
                return false;
            }
            if (this.currentIndex != index) {
                this.isFooterPlay = false;
                this.currentIndex = index;
                this.currentSongInfo = item;
            }
            if (this.isFooterPlay == true) {
                this.$refs.audioRef.pause();
            } else {
                this.$refs.audioRef.play();
                this.isFooterPlay = false;
            }
            this.isFooterPlay = !this.isFooterPlay;
            this.$store.commit('setIsFooterPlay', this.isFooterPlay);
            this.$nextTick(() => {
                this.$emit('isPlay', { index: this.$store.state.currentPlayIndex, flag: this.isFooterPlay });
            })
        },
        // 播放跟暂停歌曲
        playStopSong() {
            this.playSong(this.currentIndex);
        },
        // 拖动音量
        handleInput() {
            this.$refs.audioRef.volume = this.volume / 100;
            this.$store.commit('setCurrentVolume', this.volume);
            if (this.$refs.audioRef.volume > 0) {
                this.isMute = true;
            } else {
                this.isMute = false;
            }
        },
        // 静音
        setMute() {
            if (this.isMute) {
                this.$refs.audioRef.volume = this.tempVolume;
                this.isMute = false;
            } else {
                this.isMute = true;
                this.$refs.audioRef.volume = this.volume / 100;
            }
        },
        // 卸载时，改变播放样式
        windowBeforeunload() {
            let that = this;
            window.addEventListener('beforeunload', function () {
                window.sessionStorage.setItem('isFooterPlay', false);
                that.isFooterPlay = false;
                that.$store.commit('setIsFooterPlay', false);
            });
        },
        // 监听是否播放完成
        audioAfterprint() {
            removeEventListener('ended', this.audioOver);
            this.$refs.audioRef.addEventListener('ended', this.audioOver);
        },
        // 监听任务
        audioOver() {
            this.isFooterPlay = false;
            this.$store.commit('setIsFooterPlay', false);
            this.$emit('isPlay', { index: this.currentIndex, flag: this.isFooterPlay });
        },
        // 视频播放暂停音乐
        musicPause() {
            window.sessionStorage.setItem('isFooterPlay', false);
            this.isFooterPlay = false;
            this.$store.commit('setIsFooterPlay', false);
            this.$refs.audioRef.pause();
        }
    }
}
</script>


<style lang="less" scoped>
audio {
    opacity: 0;
}
.w {
    height: 100%;
    display: flex;
}
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 72px;
    background-color: #fff;
}

.pic {
    width: 100px;
    height: 100%;
    img {
        width: 100%;
        height: 100%;
    }
}
.song-info {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-left: 12px;
    .author {
        color: #999999;
        margin-top: 4px;
    }
}

.options {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    i {
        font-size: 50px;
        cursor: pointer;
    }
    .play {
        margin: 0 20px;
    }
}

.tools {
    position: absolute;
    right: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    i {
        font-size: 30px;
        cursor: pointer;
    }
    .el-slider {
        width: 100px;
        margin-left: 20px;
        
    }
}
</style>